Hello React

前言

至今一直在使用公司的脚手架或者create-react-app来构建React项目，使用的时间越长，就对于这种理所当然感到疑惑，遂决定利用webpack手动构建一个react项目。

简述webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

核心概念

entry // webpack进行静态分析的入口文件

output // webpack打包后输出的目标文件

loader // 静态分析时对不同文件使用不同的loader进行处理

plugins // 从分析的开始到结束，以完成loader职能之外的工作

简述整个过程：由入口文件开始分析，根据其依赖模块顺藤摸瓜找到不同的文件，并对不同的文件进行loader处理，此期间plugin做相应工作（如：代码压缩，打包优化，修改环境变量等），打包结果输出到output指定的目标文件。

Todo

初始化

1
2
3

// 创建文件夹
mkdir hello-react
cd hello-react

1 2	// 初识化npm项目 -y 使用默认package.json npm init -y

构建项目目录框架

├── build                  开发打包资源
├── dist                   线上打包资源
├── public                 公共资源
├── src                    源码目录
|    └──index.js		  入口文件
└── package.json

1 2	// /src/index.js console.log("hello world")

安装webpack

1 2	// -D 是--save-dev的简写 -S 是--save的简写 npm i webpack webpack-cli -D

此时简单运行一下，终端输入webpack，此时dist中会生成一个main.js文件。

这是因为webpack会有默认的打包配置（入口文件为/src/index.js，输入文件为/dist/main.js）。

运行一下main.js

1 2	node ./dist/main.js hello world

当然你可以使用自己的webpack配置以覆盖默认配置

webpack.config.js

创建

在项目根目录下创建webpack.config.js，webpack默认会在项目根目录下寻找webpack.config.js以覆盖默认配置，当然，你也可以指定任意路径，只需要

1	webpack --config [配置文件的目标路径]

配置

// node中的核心模块，用于文件路径处理
const path = require("path");

module.exports = {
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname, "./build"),
        filename:"main.js"
    },
    // 定义当前打包环境
    mode: "development"
}

写React

之前只是简单的执行了打印语句，并没有dom操作，接下来开始使用React，写我们最爱的JSX。

安装

1	npm i react react-dom -S

支持

webpack本身是不识别JSX的，这里需要借助相应loader

1	npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -S

webpack配置

在顺藤摸瓜的过程中若碰到 .js .jsx则启用babel-loader

而babel就会去查询相应babel配置【.babelrc】做出相应transfrom

// webpack.config.js
module:{
    rules: [{
        test: /\.(js|jsx)$/,
        use: {
            loader: "babel-loader"
        }
    }]
}

babel配置

在项目根目录中新建babel的配置文件.babelrc

// .babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage" //按需注⼊polyfill
            }
        ]
        "@babel/preset-react"
    ]
}

关于@babel/preset-env的配置详情，请见Babel7 中 @babel/preset-env 的使用和 babeljs.cn

Code

// /src/index.js
import React from "react";
import ReactDOM from "react-dom";

function App() {
    return <div>Hello React</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

HTML宿主

目前我们将打包后的代码输出到 /build/main.js，那我们就在/build下新建index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello React</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="./main.js"></script>
    </body>
</html>